<template>
  <div class="sticky-wrapper" :class="{ sticky: isSticky }">
    <slot></slot>
  </div>
</template>

<script>
export default {
    props: {
        wrapperClass: {
            type: String,
            default: 'header'
        },
        top: {
            type: Number,
            default: 20
        }
    },
    data: function () {
        return {
            isSticky: false,
            firstHeight: 0
        };
    },
    watch: {
        $route: function () {
            const stickyContent = this.$el.children[0];
            this.$el.style.height = '';
        }
    },
    mounted: function () {
        const stickyContent = this.$el.children[0];
        this.$el.style.height = stickyContent.offsetHeight + 'px';
        this.handleScroll();
        window.addEventListener('resize', this.resizeHandler, {
            passive: true
        });
    },

    destroyed: function () {
        window.removeEventListener('scroll', this.scrollHandler);
        window.removeEventListener('resize', this.resizeHandler);
    },
    methods: {
        handleScroll () {
            let scrollbarEl = document.getElementById('appMain').children[0];
            const stickyContent = this.$el.children[0];
            scrollbarEl.onscroll = () => {
                if (scrollbarEl.scrollTop > this.top) {
                    if (!this.isSticky) {
                        stickyContent.classList.add('fixed');
                        this.isSticky = true;
                    }
                } else if (this.isSticky) {
                    stickyContent.classList.remove('fixed');
                    this.isSticky = false;
                } else {
                    this.$el.style.height = stickyContent.offsetHeight + 'px';
                }
            };
        },
        scrollHandler: function () {
            const stickyContent = this.$el.children[0];
            if (window.pageYOffset > this.top) {
                if (!this.isSticky) {
                    stickyContent.classList.add('fixed');
                    this.isSticky = true;
                }
            } else if (this.isSticky) {
                stickyContent.classList.remove('fixed');
                this.isSticky = false;
            } else {
                this.$el.style.height = stickyContent.offsetHeight + 'px';
            }
        },
        resizeHandler: function () {
            const stickyContent = this.$el.children[0];
            this.$el.style.height = stickyContent.offsetHeight + 'px';
            this.handleScroll();
        }
    }
};
</script>

<style lang="scss">
.openSidebar{
  .sticky-header.fixed {
    position: fixed;
    width: calc(100% - 240px);
    top: 94px;
    z-index:1040;
    webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    animation-name: fixedHeader;
    animation-duration: .4s;
    box-shadow: 0 3px 6px rgba(51, 51, 51, .05);
  }
}
.hideSidebar{
  .sticky-header.fixed {
    position: fixed;
    width: calc(100% - 80px);
    top: 94px;
    z-index:1040;
    webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    animation-name: fixedHeader;
    animation-duration: .4s;
    box-shadow: 0 3px 6px rgba(51, 51, 51, .05);
  }
}

</style>
